<template>
  <div class="page">
    <span style="font-weight: bolder;font-size: x-large;color: black">{{todo}}</span>
    <div class="img-container">
      <img :src="qrUrl" alt="二维码" :style="{filter : 'brightness(' + qrDto.brightness + '%)' }"/>
      <el-button size="medium" v-if="qrDto.needRefresh" @click="refreshQr" style="background-color: #4CAF50; color: white;">刷新</el-button>
    </div>
    <p>打开微信app扫码登录！</p>
  </div>
</template>
<script>
export default ({
  data(){
    return{
      qrDto: {
        brightness: 100,
        needRefresh: false,
        waitTime: 10 * 1000
      }
    }
  },
  props:{
    qrUrl: String,
    todo: String,
    actionHtml: String
  },
  methods:{
    refreshQr(){
      //props定义的变量不可以直接修改，通过emit通知父组件重新将此变量传入子组件
      this.qrDto.needRefresh = false;
      this.qrDto.brightness = 100;
      setTimeout(()=>{
        this.qrDto.needRefresh = true;
        this.qrDto.brightness = 20;
      },1000)
    },

  },
  mounted() {
  //   设置定时器,验证码过期则弹出按钮提示重新刷新验证码,重置定时器
    setTimeout(()=>{
      this.qrDto.needRefresh = true;
      this.qrDto.brightness = 20;
    },1000)
  }
})
</script>
<style scoped>
.page{
  display: flex;
  flex-direction: column;
}
.img-container{
  position: relative; /* 使得子元素可以相对定位 */
  width: 200px;
  height: 200px;
  border-radius: 2px;
  border: solid 1px black;
  padding: 3px;
  //filter: brightness(50%); /* 调整图片亮度，50% 表示变暗 */
}
.img-container img{
  width: 190px;
  height: 190px;
  border-radius: 2px;
  border: solid 1px black;
}
.img-container button {
  position: absolute; /* 使用绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 精确居中，调整按钮的偏移量 */
}
</style>